<template>
    <div class="enroll_cent">

        <solid-window :msg="'格式错误'"  ref="child"></solid-window>

        <div class="enroll_inputmsg">
            <!--          邮箱输入的div容器-->
            <div>
                <div class="enroll_type changeline"
                     @mouseenter="emailmouse('enroll_type')"
                     @mouseleave="emailleave('enroll_type')">
                    <label>注册类型</label>
                    <!--                  竖线-->

                    <input class="input1"
                           type="text"
                           v-model="companymsg.type"
                           list="typelist"
                    >
                    <datalist id="typelist">
                        <option>公司</option>
                        <option>政府机构</option>
                        <option>军队</option>
                    </datalist>
                </div>
                <!--              格式错误的提示-->
            </div>


            <!--          验证码的div容器-->
            <div>
                <div class="enroll_name changeline"
                     @mouseenter="emailmouse('enroll_name')"
                     @mouseleave="emailleave('enroll_name')">
                    <label>单位名称</label>

                    <input  class="input2"
                            type="text"
                            v-model="companymsg.unitname"
                            placeholder="按营业执照填写"
                            @focus.stop="showwarnmsg('enroll_name_warn',true)"
                            @blur.stop="showwarnmsg('enroll_name_warn',false)"
                    >
                    <i class="enroll_img_i"></i>
                </div>
                <span class="enroll_name_warn">
                       <i class="enroll_img_w"></i>
                      {{this.unitnamewarnmsg}}
                </span>
            </div>


            <div>
                <div class="enroll_address changeline"
                     @mouseenter="emailmouse('enroll_address')"
                     @mouseleave="emailleave('enroll_address')">
                    <label>单位地址</label>

                    <input  class="input3"
                            type="text"
                            v-model="companymsg.unitaddress"
                            placeholder="请填写地址"
                            @focus.stop="showwarnmsg('enroll_address_warn',true)"
                            @blur.stop="showwarnmsg('enroll_address_warn',false)"
                    >
                    <i class="enroll_img_i"></i>
                </div>
                <span class="enroll_address_warn">
                       <i class="enroll_img_w"></i>
                      {{this.unitaddresswarnmsg}}
                </span>
            </div>
            <div>
                <div class="enroll_sector changeline"
                     @mouseenter="emailmouse('enroll_sector')"
                     @mouseleave="emailleave('enroll_sector')">
                    <label>所属行业</label>

                    <input  class="input4"
                            type="text"
                            v-model="companymsg.sector"
                            placeholder="请选择行业"
                            @focus.stop="showwarnmsg('enroll_sector_warn',true)"
                            @blur.stop="showwarnmsg('enroll_sector_warn',false)"
                    >
                    <i class="enroll_img_i"></i>
                </div>
                <span class="enroll_sector_warn">
                       <i class="enroll_img_w"></i>
                      {{this.sectorwarnmsg}}
                </span>
            </div>

            <div>
                <div class="enroll_invite changeline"
                     @mouseenter="emailmouse('enroll_invite')"
                     @mouseleave="emailleave('enroll_invite')">
                    <label>注册邀请码</label>

                    <input  class="input5"
                            type="text"
                            v-model="companymsg.invite"
                            placeholder="选填"
                            @focus.stop="showwarnmsg('enroll_invite_warn',true)"
                            @blur.stop="showwarnmsg('enroll_invite_warn',false)"
                    >
                    <i class="enroll_img_i"></i>
                </div>
                <span class="enroll_invite_warn">
                       <i class="enroll_img_w"></i>
                      {{this.invitewarnmsg}}
                </span>
            </div>

            <!--          提交按钮的容器-->
            <div class="clearfix">
                <div class="enroll_subimt">
                    <input @click="mailgetcode()"  type="submit" >
                </div>
                <a class="reg-other-person" href="/#/enrollview/mail">
                    <i class="reg-ohter-icon"></i>
                    个人用户注册
                </a>
            </div>
        </div>
    </div>
</template>

<script>
import SolidWindow from "@/components/sub/SolidWindow.vue";

export default {
    name: "CmsgEnroll",
    components: {SolidWindow},
    props:{},
    data(){
        return{
            enroll:{
                email:'',
                code:'',
                execode:'',
                name:'',
                password:'',
            },
            companymsg:{
                email:'',
                code:'',
                name:'',
                password:'',
                type:'',
                unitname:'',
                unitaddress:'',
                sector:'',
                invite:'',
                utype: 1,
            },
            companywarnmsg:{
                unitnamewarn: '请填写单位名称',
                unitaddresswarn:'请填写单位地址',
                sectorwarn:'请填写所属行业',
                invitewarn:'请填写邀请码'
            },

            isleave:true,
            flage:false,
            //循环红路灯
            flaged:true,
        }
    },
    methods: {

        showwarns(){
            // console.log("回归函数");
            let offeng=60;
            let offstart=-40;
            let warns=document.querySelector('.el-message--error');
            const intervalId= setInterval(function refer() {
                if (offeng<=offstart){
                    clearInterval(intervalId)
                }
                offeng-=1;
                warns.style.top=offeng+'px';
            }, 12)

        },
//提交的按钮
        async mailgetcode() {

            // 对商业注册进行发送请求
            let res = await this.$http.post("cenroll",this.companymsg);



                console.log('加密的秘钥'+this.$store.state.EBC)

                this.$router.push('/enrollview/csucc');

                this.$refs.child.Scribblewindow();

        },
        //使警告的颜色变换为灰色
        changegrey(codemsgs){
            // 警告的变换正常
            document.querySelector('.'+codemsgs)
                .querySelector('i').style='background-position: -0px -100px;';
            document.querySelector('.'+codemsgs).style="display: flex;color: #999;";
        },
        //使警告的颜色变换为红色
        changered(codemsgs){
            // 警告的颜色变换
            document.querySelector('.'+codemsgs).style='display: flex;color: #f91;';
            document.querySelector('.'+codemsgs)
                .querySelector("i").style='background-position: -17px -100px;';
        },

//显示取消的按钮
        showwarnmsg(msg,flage){
            // enroll_code_warn enroll_exec_warn enroll_QQ_warn
            const warn='.'+msg
            if (flage==true){
                this.changered(msg);
                document.querySelector(warn).style="display: flex;";
            }else if (flage==false){
                this.changegrey(msg);
                document.querySelector(warn).style="display: none;";
            }else {
                console.log("确认信息参数错误");
            }

        },
        //光标进入时的样式变化
        emailmouse(conde){
            if(this.isleave){
                const QQline="" +
                    "border-color: rgb(153, 153, 153);" +
                    "border-style: solid;" +
                    "border-width: 1px;";

                    document.querySelector('.'+conde).style=QQline;

            }
        },
//光标离开的样式变化
        emailleave(conde){
            // console.log("离开验证码按钮的方法"+this.isleave)
            if (this.isleave==true){
                const QQline="" +
                    "border-color: rgb(221, 221, 221);" +
                    "border-style: solid;" +
                    "border-width: 1px;";
                document.querySelector('.'+conde).style=QQline;
            }
        },

// 邮件悬浮触发事件
        showwarn(){
            //  验证完成后，可以用该邮箱进行登录或者找回密码
            document.querySelector('.enroll_QQ_warn').style="display: flex;";
        },
    },
    computed:{
        unitnamewarnmsg:function (){
            return this.companywarnmsg.unitnamewarn;
        },
        unitaddresswarnmsg:function (){
            return this.companywarnmsg.unitaddresswarn;
        },
        invitewarnmsg:function () {
            return this.companywarnmsg.invitewarn;
        },
        sectorwarnmsg:function () {
            return this.companywarnmsg.sectorwarn;
        },
        isleavef:function () {
            return this.isleave;
        }
    },
    created() {

    },
    mounted() {
       this.companymsg= this.$route.query.msg;
       console.log(this.$route.query.msg)
       console.log(this.companymsg);
    },
    watch: {

    },
}
</script>


<style scoped>
.enroll_cent{
    width: 1260px;
    height: auto;
    min-height: 507px;
    /*居中设置*/
    margin: auto;
}


/*---------中下侧------------注册的信息------*/
.enroll_cent .enroll_inputmsg{
    width: 400px;
    height: auto;

    margin: auto;
    display: inline-block;
}
/*---------每一个的输入邮箱和验证码的外部div容器--*/
.enroll_cent .enroll_inputmsg div{
    width: 400px;
    height: 86px;
    margin-top: 15px;
}

.enroll_cent .enroll_inputmsg div div{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: auto;
    height: 52px;
    /*overflow: hidden;*/

    /*边框的线条*/
    border-color: rgb(221, 221, 221);
    border-style: solid;
    border-width: 1px;
}

/*-----提示信息-----------*/
.enroll_cent .enroll_inputmsg div label{
    width: 108px;
    font-size: 15px;
    color: #666;
}
/*输入框*/
.enroll_cent .enroll_inputmsg div input{
    width: 174px;
    height: 95%;
    color: rgb(204, 204, 204);

    /*输入框的左侧竖线   |   */
    /*border-color: rgb(221, 221, 221);*/
    /*!*border-color: darkorchid;*!*/
    /*border-style: solid;*/
    border-width: 0px;
    /*border-left-width: 1px;*/
    outline: none;
}
.enroll_cent .enroll_inputmsg span{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
/*警告条*/
.enroll_cent .enroll_inputmsg .enroll_img_i{
    position: relative;
    float: right;
    right: -82px;
    width: 16px;
    height: 16px;
    background: url('@/assets/icon/icon.png') no-repeat;
    display: none;
    background-position: 0 -117px;
    /*background-color: blue;*/
}
/*警告条*/
.enroll_cent .enroll_inputmsg span .enroll_img_w{
    display: block;
    width: 16px;
    height: 16px;
    background-position: -0px -100px;
    background-image: url("@/assets/icon/icon.png");
}
/*格式错误/验证完成后，可以用该邮箱进行登录或者找回密码*/

/*验证码已发送，120秒内输入有效*/
.enroll_cent .enroll_inputmsg div .enroll_name_warn{
    align-items: center;
    color: #f91;
    font-size: 12px;
    display: none;
}
.enroll_cent .enroll_inputmsg div .enroll_address_warn{
    align-items: center;
    color: #f91;
    font-size: 12px;
    display: none;
}
.enroll_cent .enroll_inputmsg div .enroll_sector_warn{
    align-items: center;
    color: #f91;
    font-size: 12px;
    display: none;
}
.enroll_cent .enroll_inputmsg div .enroll_invite_warn{
    align-items: center;
    color: #f91;
    font-size: 12px;
    display: none;
}


.enroll_cent .enroll_inputmsg div div button{

    all: unset;
    width: 118px;
    height: 52px;
    border: 0px;
    cursor: pointer;
}
/*--------提交--button--*/
.enroll_cent .enroll_inputmsg .enroll_subimt input{
    color: #fff;
    background-color: #e2231a;
    width: 100%;
    cursor: pointer;
}
/*------企业用户登录------*/
.reg-other-person{
    margin-top: 25px;
    float: left;
}
.reg-other-person .reg-ohter-icon{
    display: inline-block;
    margin: 0 8px 2px 0;
    vertical-align: middle;
    width: 26px;
    height: 26px;
    background: url('@/assets/bckground/reg-icon.png') no-repeat;
    background-position: 0 -160px;
}
.clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/*----------------*/
.enroll_cent .el-message--error{
    width: 300px;
    height: 40px;
    background-color: #faccc6;
    position: fixed;
    left:50%;
    top: -50px;
    transform:translate(-50%,0);
    z-index:1000;
    border-radius: 174px 174px 157px 157px / 150px 150px 135px 135px;
    display: block;
}
</style>